<template>
  <div class="contain-body abfa-box">
    <Title></Title>
    <div class="search-contain-body">
      <el-form ref="form" inline :model="form" label-width="75px">
        <el-form-item>
          <div class="d-ib font-table" slot="label">警情名称：</div>
          <el-input v-model="form.jqmcs"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="d-ib font-table" slot="label">案事件发生时间：</div>
          <el-date-picker type="date" placeholder="选择日期" v-model="form.asjfskssjs" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <div class="d-ib font-table" slot="label">报警人姓名：</div>
          <el-input v-model="form.bjrXms"></el-input>
        </el-form-item>
		<el-form-item>
		  <div class="d-ib font-table" slot="label">警情级别：</div>
		  <el-select v-model="form.jqjbs" placeholder="请选择警情级别">
			<el-option label="" value="">--请选择警情级别--</el-option>
		    <el-option label="1" value=""></el-option>
		    <el-option label="2" value=""></el-option>
		  </el-select>
		</el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" class="button-search" @click="onSubmit">搜索</el-button>
		  <!-- <el-button icon="el-icon-delete" class="button-delete" @click="doclear">清空</el-button> -->
        </el-form-item>
      </el-form>

    </div>
    <div>
      <div class="pos-r">
        <Title msg="信息列表"></Title>
        <div class="pos-a" style="right: 0">
          <el-button @click="openOptions('add')" type="primary" icon="el-icon-plus">
            新增
          </el-button>
        </div>
      </div>
      <CustomTable
          :columns="columns"
          :table-data="tableData"
		  :pagination="pagination"
		  @pagination="paginationChange"
		  :total="total">
        <div slot="options" slot-scope="scope">
          <el-button @click="openOptions('details',scope.data)" style="margin-left: 4px;" class="button-blur">详情</el-button>
          <el-button @click="openOptions('update',scope.data)" style="margin-left: 4px;" class="button-green">编辑</el-button>
          <el-button @click="deleteDate(scope.data.jqbs)" style="margin-left: 4px;" class="button-red">删除</el-button>
        </div>
      </CustomTable>
    </div>

    <el-dialog
        width="819px"
        center
        :class="['custom-dialog-fill','font-table']" title=""
        :visible.sync="dialog.open">

      <div class="dialog-title" slot="title">
        {{ dialog.title }}
      </div>

      <div class="d-f jc-c">

        <el-form class="font-table " style="color: #000000;" ref="form" :model="form" label-width="75px" v-if="dialog.type!='details'">
          <el-form-item>
            <div class="d-ib font-table" style="margin-left: -16%;">警情名称：</div>
            <el-input v-model="form.jqmc" ></el-input>
          </el-form-item>
          <div class="d-f jc-c form-security">
            <el-form-item>
              <div class="d-ib font-table" style="margin-left: -39%;" >数据来源：</div>
              <el-input v-model="form.jqsjly"></el-input>
            </el-form-item>
			<el-form-item>
			  <div class="d-ib font-table" style="margin-left: -35%;">警情级别：</div>
			  <el-select v-model="form.jqjb" placeholder="请选择警情级别">
			    <el-option label="1" value="1"></el-option>
			    <el-option label="2" value="2"></el-option>
			  </el-select>
			</el-form-item>
          </div>
          <div class="d-f jc-c form-security">
            <el-form-item >
              <div class="d-ib font-table" style="margin-left: -59%;">案事件发生时间：</div>
              <el-date-picker type="datetime" placeholder="选择日期" v-model="form.asjfskssj" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" 
			  style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <div class="d-ib font-table" style="margin-left: -35%;">治安警情：</div>
              <el-input v-model="form.zajqdm"></el-input>
            </el-form-item>
          </div>
		  <el-form-item>
		    <div class="d-ib font-table" style="margin-left: -21%;">涉案场所地址：</div>
		    <el-input v-model="form.sacsDzmc"></el-input>
		  </el-form-item>
		  <div class="d-f jc-c form-security">
		    <el-form-item>
		      <div class="d-ib font-table" style="margin-left: -52%;">涉案场所类别：</div>
			  <el-select v-model="form.sacslbdm" placeholder="请选择涉案场所类别">
			    <el-option label="1" value="1"></el-option>
			    <el-option label="2" value="2"></el-option>
			  </el-select>
		    </el-form-item>
		    <el-form-item >
		      <div class="d-ib font-table" style="margin-left: -35%;">处理时间：</div>
		      <el-date-picker type="datetime" placeholder="选择日期" v-model="form.chlClsj" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" 
			  style="width: 100%;"></el-date-picker>
		    </el-form-item>
		  </div>
		  <div class="d-f jc-c form-security">
		    <el-form-item >
		      <div class="d-ib font-table" style="margin-left: -38%;">接警时间：</div>
		      <el-date-picker type="datetime" placeholder="选择日期" v-model="form.clrJjsj" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" 
			  style="width: 100%;"></el-date-picker>
		    </el-form-item>
		    <el-form-item >
		      <div class="d-ib font-table" style="margin-left: -35%;">到达时间：</div>
		       <el-date-picker type="datetime" placeholder="选择日期" v-model="form.clrDdsj" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" 
			   style="width: 100%;"></el-date-picker>
		    </el-form-item>
		  </div>
			
		<el-form-item>
		  <div class="d-ib font-table" style="margin-left: -15%">处理结果：</div>
		  <el-input v-model="form.chlJgcljgdm"></el-input>
		</el-form-item>
		  <div class="d-f jc-c form-security">
		    <el-form-item>
		      <div class="d-ib font-table" style="margin-left: -44%;">报警人姓名：</div>
		      <el-input v-model="form.bjrXm"></el-input>
		    </el-form-item>
		    <el-form-item>
		      <div class="d-ib font-table" style="margin-left: -42%;">报警人电话：</div>
		      <el-input v-model="form.bjrLxdh"></el-input>
		    </el-form-item>
		  </div>
		  
		  <div class="d-f jc-c form-security">
		    <el-form-item >
		      <div class="d-ib font-table" style="margin-left: -37%;">报警时间：</div>
		      <el-date-picker type="datetime" placeholder="选择日期" v-model="form.bjsj" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" 
			  style="width: 100%;"></el-date-picker>
		    </el-form-item>
		    <el-form-item>
		      <div class="d-ib font-table" style="margin-left: -42%;">处理人姓名：</div>
		      <el-input v-model="form.clrXm"></el-input>
		    </el-form-item>
		  </div>
		  
		  <div class="d-f jc-c form-security">
		    <el-form-item>
		      <div class="d-ib font-table" style="margin-left: -50%;">涉案场所经度：</div>
		      <el-input v-model="form.sacsDqjd"></el-input>
		    </el-form-item>
		    <el-form-item>
		      <div class="d-ib font-table" style="margin-left: -49%;">涉案场所纬度：</div>
		      <el-input v-model="form.sacsDqwd"></el-input>
		    </el-form-item>
		  </div>
		  
		  <el-form-item>
			<div class="d-ib font-table" slot="label">案由：</div>
			<el-input type="textarea" :rows="3" v-model="form.ay"></el-input>
		  </el-form-item>
		  
		  <el-form-item>
			<div class="d-ib font-table" slot="label">备注：</div>
			<el-input type="textarea" :rows="3" v-model="form.bz"></el-input>
		  </el-form-item>
		  
		  <el-form-item>
		    <div class="d-ib font-table" slot="label">照片：</div>
		    <el-upload
		            class="upload-demo"
		            action="http://127.0.0.1:8888/wh/dxhd-jq/update"
		            :data="{jqbs:form.jqbs}"
		            :on-preview="handlePreview"
		            :on-remove="handleRemove" 
		            :on-success="handSuccess"
		            :before-upload="beforeAvatarUpload"
		            :file-list="fileList"
		            :limit=1
		            list-type="picture">
		      <el-button size="small" type="primary" v-show="flagupdate">点击上传</el-button>
		      <div slot="tip" class="el-upload__tip" v-show="flagupdate" style="color: red;">只能上传jpg/png文件，且不超过4M!</div>
		    </el-upload>
		  </el-form-item>
        </el-form>
		<el-form class="font-table " style="color: #000000;" ref="form" :model="form" label-width="75px" v-if="dialog.type=='details'">
		  <el-form-item>
		    <div class="d-ib font-table" style="margin-left: -16%;">警情名称：</div>
		    <el-input v-model="form.jqmc" style="width: 519px;" readonly></el-input>
		  </el-form-item>
		  <div class="d-f jc-c form-security">
		    <el-form-item>
		      <div class="d-ib font-table" style="margin-left: -39%;">数据来源：</div>
		      <el-input v-model="form.jqsjly" readonly></el-input>
		    </el-form-item>
			<el-form-item>
			  <div class="d-ib font-table" style="margin-left: -35%;">警情级别：</div>
			  <el-input v-model="form.jqjb" readonly></el-input>
			</el-form-item>
		  </div>
		  <div class="d-f jc-c form-security">
		    <el-form-item >
		      <div class="d-ib font-table" style="margin-left: -59%;">案事件发生时间：</div>
			  <el-input v-model="form.asjfskssj" readonly></el-input>
		    </el-form-item>
		    <el-form-item>
		      <div class="d-ib font-table" style="margin-left: -35%;">治安警情：</div>
		      <el-input v-model="form.zajqdm" readonly></el-input>
		    </el-form-item>
		  </div>
		  <el-form-item>
		    <div class="d-ib font-table" style="margin-left: -21%;">涉案场所地址：</div>
		    <el-input v-model="form.sacsDzmc" readonly style="width: 515px;"></el-input>
		  </el-form-item>
		  <div class="d-f jc-c form-security">
		    <el-form-item>
		      <div class="d-ib font-table" style="margin-left: -52%;">涉案场所类别：</div>
			  <el-input v-model="form.sacslbdm" readonly></el-input>
		    </el-form-item>
		    <el-form-item >
		      <div class="d-ib font-table" style="margin-left: -35%;">处理时间：</div>
			  <el-input v-model="form.chlClsj" readonly></el-input>
		    </el-form-item>
		  </div>
		  <div class="d-f jc-c form-security">
		    <el-form-item >
		      <div class="d-ib font-table" style="margin-left: -38%;">接警时间：</div>
			  <el-input v-model="form.clrJjsj" readonly></el-input>
		    </el-form-item>
		    <el-form-item >
		      <div class="d-ib font-table" style="margin-left: -35%;">到达时间：</div>
			  <el-input v-model="form.clrDdsj" readonly></el-input>
		    </el-form-item>
		  </div>
			
		<el-form-item>
		  <div class="d-ib font-table" style="margin-left: -15%">处理结果：</div>
		  <el-input v-model="form.chlJgcljgdm" readonly></el-input>
		</el-form-item>
		  <div class="d-f jc-c form-security">
		    <el-form-item>
		      <div class="d-ib font-table" style="margin-left: -44%;">报警人姓名：</div>
		      <el-input v-model="form.bjrXm" readonly></el-input>
		    </el-form-item>
		    <el-form-item>
		      <div class="d-ib font-table" style="margin-left: -42%;">报警人电话：</div>
		      <el-input v-model="form.bjrLxdh" readonly></el-input>
		    </el-form-item>
		  </div>
		  
		  <div class="d-f jc-c form-security">
		    <el-form-item >
		      <div class="d-ib font-table" style="margin-left: -37%;">报警时间：</div>
			  <el-input v-model="form.bjsj" readonly></el-input>
		    </el-form-item>
		    <el-form-item>
		      <div class="d-ib font-table" style="margin-left: -42%;">处理人姓名：</div>
		      <el-input v-model="form.clrXm" readonly></el-input>
		    </el-form-item>
		  </div>
		  
		  <div class="d-f jc-c form-security">
		    <el-form-item>
		      <div class="d-ib font-table" style="margin-left: -50%;">涉案场所经度：</div>
		      <el-input v-model="form.sacsDqjd" readonly></el-input>
		    </el-form-item>
		    <el-form-item>
		      <div class="d-ib font-table" style="margin-left: -49%;">涉案场所纬度：</div>
		      <el-input v-model="form.sacsDqwd" readonly></el-input>
		    </el-form-item>
		  </div>
		  
		  <el-form-item>
			<div class="d-ib font-table" slot="label">案由：</div>
			<el-input type="textarea" :rows="3" v-model="form.ay" readonly></el-input>
		  </el-form-item>
		  
		  <el-form-item>
			<div class="d-ib font-table" slot="label">备注：</div>
			<el-input type="textarea" :rows="3" v-model="form.bz" readonly></el-input>
		  </el-form-item>
		  
		  <el-form-item>
		    <div class="d-ib font-table" style="margin-left: -9%">照片：</div>
		    <el-upload
		            class="upload-demo"
		            :file-list="fileList"
		            list-type="picture">
		    </el-upload>
		  </el-form-item>
		</el-form>
      </div>
	  
      <div class="d-f jc-c">
        <div v-if="dialog.type=='details'">
          <el-button
              class="button-cancel"
              @click="dialog.open = false">确 定
          </el-button>
        </div>
        <div v-if="dialog.type=='add'">
          <el-button
              class="button-cancel"
              @click="dialog.open = false">取 消
          </el-button>
          <el-button
              class="button-submit mr58"
              @click="addJqxx">确 定
          </el-button>
        </div>
		<div v-if="dialog.type=='update'">
		  <el-button
		      class="button-cancel"
		      @click="dialog.open = false">取 消
		  </el-button>
		  <el-button
		      class="button-submit mr58"
		      @click="updateJqxx">确 定
		  </el-button>
		</div>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import Title from "../../components/Title";
import CustomTable from "../../components/CustomTable";
import dxhdUrl from "../../config/config";
import formateDate from "../../config/date";

export default {
  name: "Abfa",
  components: {Title, CustomTable,dxhdUrl,formateDate},
  data() {
    return {
	  flagupdate:true,
	  fileList: [],	
	  total: 0,
	  pagination: {},
      dialog: {
        title: 's',
        open: false,
        type: 'details',//'edit','add','details'
      },
	  readonly: true,
      form: {
        name: '',
        schemeName: '',
        activityName: '',
        region: '',
        date: '',
        bigEvent: '',
        shape: '',
        approval: '',
        desc: '',
        remark: ''
      },
      tableData: [
        
      ],
      params: {
        current: 1,
        size: 10,

      },
      columns: [
        {
          key: 'jqmc',
          label: '警情名称'
        },{
          key: 'jqjb',
          label: '警情级别'
        },
        {
          key: 'asjfskssj',
          label: '案事件发生开始时间'
        },
        {
          key: 'sacsDzmc',
          label: '涉案场所地址'
        },
        {
          key: 'bjrXm',
          label: '报警人姓名'
        },
        {
          key: 'bjsj',
          label: '报警时间'
        },
        {
          key: 'clrXm',
          label: '处理人姓名'
        },
        {
          key: 'clrJjsj',
          label: '处理时间'
        },
        {
          key: 'options',
          label: '操作',
          width: '243px',
          slot: true
        }
      ],
    }
  },
  mounted() {
    //this.getList();
  },
  methods: {
    onSubmit() {
      this.getList(this.pagination.pageNum, this.pagination.pageSize);
    },
	handSuccess(response, file, fileList){
	  console.log(response,file,fileList);
	    this.form.jqbs=response.data;
	
	},
	beforeAvatarUpload(file) {
	    const isJPG = file.type === 'image/jpeg';
	    const isLt4M = file.size / 1024 / 1024 < 4;
	
	    if (!isJPG) {
	        this.$message.error('上传头像图片只能是 JPG 格式!');
	    }
	    if (!isLt4M) {
	        this.$message.error('上传头像图片大小不能超过 4MB!');
	    }
	    return isJPG && isLt4M;
	},
	handleRemove(file, fileList) {
	    this.remove();
	},
	handlePreview(file) {
	},
	paginationChange (e) {
	  this.pagination = e;
	  this.getList(this.pagination.pageNum, this.pagination.pageSize);
	},
    getList (page, limit) {
      var asjfskssj = this.form.asjfskssjs || '';
      if("" != asjfskssj){
        asjfskssj = this.formateDate(asjfskssj,'yyyy-MM-dd');
      }

      this.axios.post(dxhdUrl.dxhdUrl+'dxhd-jq/selectPage', { 
        current: page,
        size: limit,
        entity: {
          jqmc: this.form.jqmcs || '',
          asjfskssj: asjfskssj,
          bjrXm: this.form.bjrXms || ''
        }
      }).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      }).catch((error) => {
		  this.$message({
		      message: '数据查询失败！'+error,
			  type: 'error',
		  });
      });
    },
	openOptions(params,data) {
	  this.dialog.type = params
	  if (params == 'add') {
	    this.dialog.title = '新增方案';
		this.form = {};
		this.fileList=[];
	  }
	  if (params == 'details') {
	    this.dialog.title = '警情详情';
		this.form = data;
		if(data.chlChltpDz==null){
		    this.fileList=[];
		}else{
		    this.fileList=[{}];
		    this.fileList[0].url=data.chlChltpDz;
		}
		// this.url='data:image/png;base64,' + data.chlChltp
	  }
	  if (params == 'update') {
	    this.dialog.title = '警情编辑'
		this.form = data;
		if(data.chlChltpDz==null){
		    this.fileList=[];
		}else{
		    this.fileList=[{}];
		    this.fileList[0].url=data.chlChltpDz;
		}
		// this.handleUploadRemove();
	  }
	  this.dialog.open = true
	},
	addJqxx(){
		var jqbs =this.form.jqbs;
		var url ='/dxhd-jq/save';
		if(jqbs!=null && jqbs!=''){
		    url= '/dxhd-jq/updateById';
		}
		this.axios.post(url, this.form,).then((res) => {
		  if(res.code == "1"){
			  this.$message({
				  message: '数据保存成功！',
				  type: 'success',
				  offset:300
			  });
		  }
		  this.dialog.open = false;
		  this.getList(1,10);
		}).catch((error) => {
		  this.$message({
			  message: '数据保存失败！'+error,
			  type: 'error',
		  });
		});
	},
	updateJqxx(){
		var chlChltpBase64 = this.form.chlChltpBase64;
		if(chlChltpBase64){
			this.form.chlChltp=chlChltpBase64;
			this.form.chlChltpBase64=null;
		}
		this.axios.post(dxhdUrl.dxhdUrl+'dxhd-jq/updateById', this.form,).then((res) => {
		  if(res.code == "1"){
			  this.$message({
				  message: '数据保存成功！',
				  type: 'success',
				  offset:300
			  });
		  }
		  this.dialog.open = false;
		  this.getList(1,10);
		}).catch((error) => {
		  this.$message({
			  message: '数据保存失败！'+error,
			  type: 'error',
		  });
		});
	},
    deleteDate(jqbs) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        type: ''
      }).then(() => {
		this.delete(jqbs);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
	
	delete(jqbs){
		var params = new URLSearchParams();
		params.append('Id', jqbs);   
		this.axios.post(dxhdUrl.dxhdUrl+'dxhd-jq/removeById', params,
		).then((res) => {
		  if(res.code == "1"){
			  this.$message({
				  message: '数据删除成功！',
				  type: 'success',
				  offset:300
			  });
			  this.getList(1,10);
		  }
		}).catch((error) => {
		  this.$message({
			  message: '数据删除失败！'+error,
			  type: 'error',
		  });
		});
	},
	remove(){
	    this.axios.post('/dxhd-jq/handleRemove', {
	        jqbs:this.form.jqbs
	    }).then((res) => {
	        this.$message({
				type: 'success',
				message: '删除成功!'
			});
		}).catch((error) => {
				this.$message({
				type: 'error',
				message: '删除失败'
			});
		});
	}
  }
}
</script>

<style lang="scss">
.abfa-box {
  .mb-14 {
    margin-bottom: 14px;
  }

  .mr111 {
    margin-right: 111px;
  }

  .mr58 {
    margin-right: 58px;
  }

}


.abfa-add {
  color: #436AA3;
  line-height: 17px;

  span {
    display: inline-block;
  }
}

.add-attachment {
  background-image: url("../../assets/imgs/add_attachment.svg");
  background-size: 17px 17px;
  background-position: 0 1px;
  background-repeat: no-repeat;
  width: 17px;
  height: 17px;
  display: inline-block;
}

.add_photos {
  background-image: url("../../assets/imgs/add_photos.svg");
  background-size: 17px 17px;
  background-position: 0 1px;
  background-repeat: no-repeat;
  width: 17px;
  height: 17px;
  display: inline-block;
}

.scheme-preview {
  .el-input-group {
    width: 430px;
  }

  .button-submit {
    padding: 6px 22px;
  }
}

.custom-dialog-fill {
  .form-security {
    .el-form-item__content {
      width: 205px !important;
    }
  }

}


</style>

